<template>
	<view class="mask" v-show="value">
		<view class="dialog" :style="{width, height}">
			<center style="font-weight: bold;min-height: 1.5em;">{{title}}</center>
			<slot>
				{{content}}
			</slot>
			<view class="btns">
				<button size="mini" v-for="(btn, idx) in buttons" :key="idx" 
				@click="btnClick(btn, idx)" style="margin:0" type="primary">{{btn}}</button>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name:"hg-dialog",
		props:{
			width:{
				type:[Number, String],
				default: "500rpx"
			},
			height: {
				type:[Number, String],
				default: "300rpx"
			},
			value: {			// 是否显示关闭
				type: Boolean,
			},
			title:{
				type: String,
				default:'',
			},
			buttons:{
				type:Array,
				default(){
					return ['取消', '确定',]
				}
			},
			content: {			// 内容
				type: String,
				default: '',
			},
			closable:{
				type:Boolean,
				default: true,
			},
			mask:{
				type: Boolean,
				default: true,
			},
			destroyOnClose:{	// 关闭时是否销毁组件
				type: Boolean,
				default: true,
			}
		},
		data() {
			return {
				
			};
		},
		methods:{
			btnClick(btn, idx){
				this.$emit('buttonClick', [btn, idx])
				if(btn=='取消'){
					this.$emit('cancel')
					this.$emit('input', false)
				}else if(btn=='确定'){
					this.$emit('confirm')
					this.$emit('input', false)
				}
			}
		}
	}
</script>

<style scoped>
	.btns{
		position: absolute;
		bottom: 20rpx;
		left: 0;
		
		display: flex;
		width: 100%;
		justify-content: space-around;
	}
	
	.mask{
		margin: 0!important;
		
		position: absolute;
		
		background-color: rgba(0,0,0,0,5);
		
		background-attachment: fixed;
		
		z-index: 1234567;
		
		width: 750rpx;
		height: 100vh;
	}
	
	.dialog{
		position: absolute;
		z-index: 1234568;
		min-height: 300rpx;
		min-width: 500rpx;
		
		background-color: white;
		
		left: 50%;
		top: 50%;
		
		transform: translate(-50%, -50%);
		
		border-radius: 10rpx;
		
		padding: 20rpx
	}
	
	
</style>
